<template>
    <div>
        <ph-form :type="formStyle">
            <ph-validator ref="validator">
            <ph-form-group>
                <ph-form-input
                :block="false"
                v-model="account"
                label="账户名"
                placeholder="required"
                :validators="['required']"
                
                />
                <ph-form-input
                :block="false"
                v-model="email"
                label="邮箱"
                placeholder="email"
                :validators="['email']"
                />
                <ph-form-input
                :block="false"
                placeholder="测试警用"
                label="禁用"
                :disabled="true"
                />
                <ph-form-number-range
                
                label="期望月薪(k)"
                placeholderStart="下限"
                placeholderEnd="上限"
                :validators="['required']"
                :block="false"
                v-model="salary"
                />
            </ph-form-group>
            <ph-form-datetime-cascade
                label="任职日期"
                type="date"
                :validators="['required']"
                v-model="duty"
                placeholderStart="开始日期"
                placeholderEnd="结束日期"
            />
            <ph-form-datetime-cascade
                label="测试禁止"
                type="date"
                :disabled="true"
                :validators="['required']"
                placeholderStart="开始日期"
                placeholderEnd="结束日期"
            />
            <ph-form-datetime-range
                label="任职日期"
                type="date"
                v-model="duty"
                placeholderStart="开始日期"
                placeholderEnd="结束日期"
            />
            <ph-form-input
                v-model="profile"
                label="个人主页"
                :validators="['url']"
            />
            <ph-form-radio
                label="性别"
                v-model="gender"
                
            >
                <ph-radio-item :value="0">男</ph-radio-item>
                <ph-radio-item :value="1">女</ph-radio-item>
            </ph-form-radio>
            <ph-form-select
                label="喜欢的职业"
                placeholder="可以配置"
                v-model="fpros"
                :multiple="true"
                :validators="['required']"
            >
                <ph-option
                :value="opt.value"
                v-for="opt in pros"
                :key="opt.value"
                >{{ opt.text }}</ph-option
                >
            </ph-form-select>
            <ph-form-switch
                label="婚否"
                v-model="married"
                
            />
            <ph-form-color
                label="喜欢的颜色"
                v-model="color"
                
                :disabled="false"
                :validators="['color']"
            />
            <ph-form-color
                label="禁止的颜色"
                v-model="color"                
                :disabled="true"
                :validators="['color']"
            />
            <ph-form-datetime
                type="date"
                label="生日"
                v-model="birth"
                :validators="['required']"
            />
            <ph-form-select
                label="大学"
                v-model="uni"
                align="center"
                :validators="['required']"
            >
                <ph-option
                :value="opt.value"
                v-for="opt in unis"
                :key="opt.value"
                >{{ opt.text }}</ph-option
                >
            </ph-form-select>
            <ph-form-select
                label="职业"
                v-model="pro"
                placeholder="请选择职业"
                :multiple="true"
                theme="dark"
            >
                <ph-option
                :value="opt.value"
                v-for="opt in pros"
                :key="opt.value"
                >{{ opt.text }}</ph-option
                >
            </ph-form-select>
            <ph-form-checkbox
                label="读过的小学"
                v-model="sx"
                
                :validators="['required']"
            >
                <ph-checkbox-item
                v-for="item in sxs"
                :value="item.value"
                :key="item.value"
                >{{ item.text }}</ph-checkbox-item
                >
            </ph-form-checkbox>
            <ph-form-checkbox
                label="禁止全部选项"
                v-model="sx"
                
                :disabled="true"
            >
                <ph-checkbox-item
                v-for="item in sxs"
                :value="item.value"
                :key="item.value"
                >{{ item.text }}</ph-checkbox-item
                >
            </ph-form-checkbox>
            <ph-form-checkbox
                label="禁止某一个"
                v-model="sx"
            >
                <ph-checkbox-item
                :disabled="item.value == 2"
                v-for="item in sxs"
                :value="item.value"
                :key="item.value"
                >{{ item.text }}</ph-checkbox-item
                >
            </ph-form-checkbox>
            <ph-form-textarea
                label="个人介绍"
                placeholder="我想起那天夕阳下的蹦跑。。。"
                :limit="10"
                v-model="intro"
                :validators="['required']"
                
            />
            <ph-button-group :container="true" dir="col">
                <ph-button type="primary" @click="onSubmit">获取数据</ph-button>
            </ph-button-group>
            </ph-validator>
        </ph-form>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from "vue";

import {
  PhForm,
  PhValidator,
  PhFormNumberRange,
  PhFormDatetimeCascade,
  PhFormDatetimeRange,
  PhFormDatetime,
  PhFormGroup,
  PhFormTextarea,
  PhFormInput,
  PhFormSelect,
  PhFormSwitch,
  PhFormColor,
  PhFormCheckbox,
  PhFormRadio,
  PhOption,
  PhCheckboxItem,
  PhRadioItem,
  PhButton,
  PhButtonGroup,
  
} from "@/index";
import PhToast from 'ph-toast'
import PhModel from 'ph-modal'
import { PhModal } from "@/components";
export default defineComponent({
  components: {
    PhForm,
    PhFormNumberRange,
    PhFormDatetimeCascade,
    PhFormDatetimeRange,
    PhFormDatetime,
    PhValidator,
    PhFormGroup,
    PhFormTextarea,
    PhFormInput,
    PhFormSelect,
    PhFormSwitch,
    PhFormColor,
    PhFormCheckbox,
    PhFormRadio,
    PhOption,
    PhCheckboxItem,
    PhRadioItem,
    PhButton,
    PhButtonGroup,
  },
  setup() {
    const formdata = reactive<Record<string, any>>({
      intro:"",
      account: "",
      gender: 0,
      salary: [],
      duty: [],
      email: "",
      profile: "",
      color: "#FF00FF",
      birth: "",
      married: false,
      uni: 1,
      fpros: [2, 4],
      pro: [1],
      sx: [2]
    });
    const datesource = {
      unis: [
        {
          value: 1,
          text: "宁夏大学",
        },
        {
          value: 2,
          text: "厦门大学",
        },
        {
          value: 3,
          text: "宁波大学",
        },
        {
          value: 4,
          text: "清华大学",
        },
        {
          value: 5,
          text: "北京大学",
        },
      ],
      
      sxs: [
        {
          value: 1,
          text: "康家沟小学",
        },
        {
          value: 2,
          text: "张家界小学",
        },
        {
          value: 3,
          text: "贵族小学",
        },
      ],
      
      pros: [
        {
          value: 0,
          text: "法师",
        },
        {
          value: 1,
          text: "佛缘",
        },
        {
          value: 2,
          text: "达文西",
        },
        {
          value: 3,
          text: "007",
        },
        {
          value: 4,
          text: "达尔文",
        },
        {
          value: 5,
          text: "阿娜达",
        },
      ],
    }
    const formStyle = ref<string | null>(null);
    const validator = ref<InstanceType<typeof PhValidator>>()
    const onSubmit = ()=>{
      validator.value?.validateForm().then(()=>{
        PhModal.alert(JSON.stringify(formdata,null,4))
        console.log(formdata)
      }).catch(()=>{
        PhToast.danger("请完善表单内容")
      })
    }
    return {
      ...toRefs(formdata),
      ...datesource,
      formStyle,
      validator,
      onSubmit
    };
  },
});
</script>
